<template>
    <div class="page-container">
        <div class="form-container">
            <el-form :inline="true" label-width="80px" :size="'small'" ref="form">
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="贸易类型">
                            <el-select v-model="state.query.entId" placeholder="请选择" style="width: 100%" clearable
                                filterable>
                                <el-option label="出口" :value="1" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="派车单号">
                            <el-input v-model="state.query.blNo" clearable placeholder="请输入" style="width: 100%" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="提单号">
                            <el-input v-model="state.query.blNo" clearable placeholder="请输入" style="width: 100%" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="箱号/封箱">
                            <el-select v-model="state.query.client" placeholder="请选择" style="width: 100%" clearable
                                filterable remote :loading="state.currentLoading">
                                <el-option v-for="item in client" :key="item.value" :label="item.label" :value="item.value">
                                    <span style="float: left"> {{ item.label }}</span>
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="物流单号">
                            <el-select v-model="state.query.department" placeholder="请选择" style="width: 100%" clearable
                                filterable remote :loading="state.currentLoading">
                                <el-option v-for="item in department" :key="item.value" :label="item.label"
                                    :value="item.value">
                                    <span style="float: left"> {{ item.label }}</span>
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="车队">
                            <el-select remote-show-suffix v-model="state.query.salesman" placeholder="请选择"
                                style="width: 100%" clearable filterable remote :loading="state.currentLoading">
                                <el-option v-for="item in salesman" :key="item.value" :label="item.label"
                                    :value="item.value">
                                    <span style="float: left"> {{ item.label }}</span>
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="车牌号">
                            <el-input v-model="state.query.cardNum" clearable placeholder="请输入" style="width: 100%" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="派车状态">
                            <el-select v-model="state.query.entId" placeholder="请选择" style="width: 100%" clearable
                                filterable>
                                <el-option v-for="item in sendCardStatusList" :key="item.value" :label="item.label"
                                    :value="item.value">
                                    <span style="float: left"> {{ item.label }}</span>
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-collapse-transition>
                    <div v-show="state.hidden">
                        <el-row>
                            <el-col :span="6">
                                <el-form-item label="装柜时间">
                                    <el-date-picker v-model="recDateTime" type="daterange" range-separator="~"
                                        start-placeholder="开始日期" end-placeholder="结束日期" size="small" style="width: 100%"
                                        clearable value-format="YYYY-MM-DD" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>
                </el-collapse-transition>
                <div class="flex-container" style="margin-left: 20px">
                    <el-button type="primary" icon="search" @click="getList" size="small">
                        搜索
                    </el-button>
                    <el-button type="info" icon="refresh" @click="reset" size="small">
                        重置
                    </el-button>
                    <el-button type="primary" @click="state.hidden = !state.hidden" size="small" style="padding: 8px 15px">
                        <div class="flex-container">
                            <el-icon style="transform: rotate(90deg)">
                                <MoreFilled />
                            </el-icon>
                            {{ state.hidden ? "折叠" : "更多条件" }}
                        </div>
                    </el-button>
                </div>
            </el-form>
        </div>
        <div class="tableDiv">
            <div class="btns">
                <div class="left">
                    <el-button @click="truckingOrderShow" type="primary">创建派车单</el-button>
                    <el-button @click="designateCardsShow" type="primary">指派车队</el-button>
                    <el-button @click="cardsInfoShow" type="primary">车队信息填报</el-button>
                    <el-button @click="logisticsTrackingShow" type="primary">查看物流跟踪</el-button>
                </div>
                <div class="right">
                    <el-button @click="customOpen">自定义列</el-button>
                    <el-button @click="refresh" icon="RefreshRight">刷新</el-button>
                </div>
            </div>
            <AppVxeTable class="vex-table-primary" stripe :tableData="state.tableData.data" @change="getList" :height="0"
                :tableOption="state.tableData.option" v-loading="state.tableData.loading">
                <vxe-column type="checkbox" width="40" align="center" fixed="left" />
                <vxe-column sortable v-for="item in state.customColumn" :key="item.prop" :field="item.prop"
                    :title="item.label" :width="item.width" showOverflowTooltip>
                    <template v-if="item.prop === 'dispatchNumber'" #default="{ row }">
                        <span style="color: #5a9cf8; cursor: pointer"
                            @click="toEditPage(row.sendCardStatus, row.dispatchNumber)">
                            {{ row.dispatchNumber }}
                        </span>
                    </template>
                    <template v-if="item.prop === 'sendCardStatus'" #default="{ row }">
                        <div style="display: flex;align-items: center;">
                            <div style="width: 6px;height: 6px;border-radius: 50%;margin-right: 5px;background: #3B78FF"
                                class="left">
                            </div>
                            <div style="color: #000000D8" class="right">
                                {{ sendCardStatus[row.sendCardStatus] }}
                            </div>
                        </div>
                    </template>
                    <template v-if="item.prop === 'orderState'" #default="{ row }">
                        <span>{{ row.orderState }}</span>
                    </template>
                    <template v-if="item.prop === 'currency'" #default="{ row }">
                        <span>{{ row.currency }}</span>
                    </template>
                </vxe-column>

            </AppVxeTable>
        </div>
        <!-- 自定义列 -->
        <el-dialog class="dialog" v-model="state.custom.show" title="自定义列" width="800" :before-close="customHandleClose">
            <Draggbale ref="draggbale" :items="state.customColumn"></Draggbale>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="resetDraggbale">重置</el-button>
                    <el-button @click="customHandleClose">取消</el-button>
                    <el-button type="primary" @click="saveDraggbale">
                        保存
                    </el-button>
                </div>
            </template>
        </el-dialog>
        <!-- 创建派车单 -->
        <el-dialog class="dialog" v-model="state.truckingOrder.show" title="创建派车单" width="600"
            :before-close="truckingOrderClose">
            <div class="ctn">
                <div class="left">
                    <span>*</span>选择合适的发货单:
                </div>
                <div class="right">
                    <el-table ref="taskTableRef" border stripe @select="truckingOrderChange"
                        :data="state.truckingOrder.data" v-loading="state.tableLoading">
                        <el-table-column type="selection" width="40" align="center" fixed="left" />
                        <el-table-column align="center" showOverflowTooltip sortable label="发货单号" prop="ConsignNum">
                            <template #default="{ row }">
                                <span style="color: #3B78FF;cursor: pointer;">{{ row.ConsignNum }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" showOverflowTooltip sortable label="箱型箱量" prop="Boxbox">
                        </el-table-column>
                        <el-table-column align="center" showOverflowTooltip sortable label="拖柜类型" prop="haulingState">
                        </el-table-column>
                    </el-table>
                </div>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="truckingOrderClose">取消</el-button>
                    <el-button type="primary" @click="truckingOrderSave">
                        确认
                    </el-button>
                </div>
            </template>
        </el-dialog>
        <!-- 指派车队 -->
        <el-dialog class="dialog" v-model="state.designateCards.show" title="指派车队" width="1200"
            :before-close="designateCardsClose">
            <div class="designateCards">
                <div class="title">订舱信息</div>
                <div style="border: 0;" class="form-container">
                    <el-form :inline="true" label-width="80px" :size="'small'" ref="form">
                        <el-row>
                            <el-col :span="6">
                                <el-form-item label="提单号">
                                    <el-input disabled v-model="state.designateCards.form.blNo" clearable placeholder="请输入"
                                        style="width: 100%" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="BOOKING">
                                    <el-input disabled v-model="state.designateCards.form.booking" clearable
                                        placeholder="请输入" style="width: 100%" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="合约号">
                                    <el-input disabled v-model="state.designateCards.form.contractNumber" clearable
                                        placeholder="请输入" style="width: 100%" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="船代">
                                    <el-select disabled v-model="state.designateCards.form.shipAgency" placeholder="请选择"
                                        style="width: 100%" clearable filterable>
                                        <!-- <el-option :label="1" :value="1" /> -->
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="船名">
                                    <el-input disabled v-model="state.designateCards.form.shipsName" clearable
                                        placeholder="请输入" style="width: 100%" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="航次">
                                    <el-input disabled v-model="state.designateCards.form.voyage" clearable
                                        placeholder="请输入" style="width: 100%" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="靠泊码头">
                                    <el-select disabled v-model="state.designateCards.form.wharf" placeholder="请选择"
                                        style="width: 100%" clearable filterable>
                                        <el-option label="码头名称" :value="1" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="进港代码">
                                    <el-select disabled v-model="state.designateCards.form.entryCode" placeholder="请选择"
                                        style="width: 100%" clearable filterable>
                                        <el-option label="POLAND" :value="1" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="开航日期">
                                    <el-date-picker disabled v-model="state.designateCards.form.sailingDate" type="datetime"
                                        style="width: 100%" placeholder="" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="截港时间">
                                    <el-date-picker disabled v-model="state.designateCards.form.estimateTimeClose"
                                        type="datetime" placeholder="" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="截关时间">
                                    <el-date-picker disabled v-model="state.designateCards.form.closingDate" type="datetime"
                                        placeholder="" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="截单时间">
                                    <el-date-picker disabled v-model="state.designateCards.form.closingTime" type="datetime"
                                        placeholder="" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="箱型箱量">
                                    <el-input disabled v-model="state.designateCards.form.boxBox" clearable
                                        placeholder="请输入" style="width: 100%" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="18">
                                <el-form-item label="货物描述">
                                    <el-input disabled v-model="state.designateCards.form.goodsMark" clearable
                                        placeholder="请输入" style="width: 100%" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
                <div style="" class="title">装柜信息</div>
                <div class="stuffingInfo">
                    <div v-for="(item, index) in state.designateCards.data" class="item">
                        <div class="itemTitle">
                            <div class="le">装柜地点{{ item.id }}</div>
                            <div class="ri" @click="delStuffing(item.id)">删除</div>
                        </div>
                        <div class="itemContent">
                            <div style="border: 0;" class="form-container">
                                <el-form :inline="true" label-width="100px" :size="'small'" ref="form">
                                    <el-row>
                                        <el-col :span="12">
                                            <el-form-item label="装柜时间">
                                                <div style="width: 100%;display:flex;justify-content: space-between;">
                                                    <el-date-picker v-model="item.stuffingTime" type="datetime"
                                                        style="width: 67%" placeholder="" />
                                                    <el-select v-model="item.upDown" placeholder="请选择" style="width: 30%"
                                                        clearable filterable>
                                                        <el-option label="早上" :value="1" />
                                                        <el-option label="下午" :value="2" />
                                                    </el-select>
                                                </div>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="12">
                                            <el-form-item label="装柜地点">
                                                <el-select v-model="item.stuffingAddress" placeholder="请选择"
                                                    style="width: 100%" clearable filterable>
                                                    <el-option label="POLAND" :value="1" />
                                                    <el-option label="amer" :value="2" />
                                                </el-select>
                                            </el-form-item>
                                        </el-col> <el-col :span="12">
                                            <el-form-item label="装柜联系人">
                                                <el-select v-model="item.stuffingPeo" placeholder="请选择" style="width: 100%"
                                                    clearable filterable>
                                                    <el-option label="张三" :value="1" />
                                                    <el-option label="李四" :value="2" />
                                                </el-select>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="12">
                                            <el-form-item label="装柜联系电话">
                                                <el-input v-model="item.stuffingPho" clearable placeholder="请输入"
                                                    style="width: 100%" />
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                </el-form>
                            </div>
                        </div>
                    </div>
                    <div @click="addStuffing" class="add">+添加装柜地点</div>
                </div>
                <div style="margin-top: 20px;" class="title">指派车队</div>
                <div style="border: 0;" class="form-container">
                    <el-form :inline="true" label-width="90px" :size="'small'" ref="form">
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="车队">
                                    <el-select v-model="state.designateCards.cardsForm.cards" placeholder="请选择"
                                        style="width: 100%" clearable filterable>
                                        <el-option label="车队1" :value="1" />
                                        <el-option label="车队2" :value="2" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="车队联系人">
                                    <el-select v-model="state.designateCards.cardsForm.people" placeholder="请选择"
                                        style="width: 100%" clearable filterable>
                                        <el-option label="车队联系人" :value="1" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="车队联系电话">
                                    <el-select v-model="state.designateCards.cardsForm.number" placeholder="请选择"
                                        style="width: 100%" clearable filterable>
                                        <el-option label="1358897163" :value="1" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="designateCardsReset">重置</el-button>
                    <el-button @click="designateCardsClose">取消并返回</el-button>
                    <el-button type="primary" @click="designateCardsSave">
                        确认指派
                    </el-button>
                </div>
            </template>
        </el-dialog>
        <!-- 车队信息填报 -->
        <el-dialog class="dialog" v-model="state.cardsInfo.show" title="车队信息填报" width="1000" :before-close="cardsInfoClose">
            <div class="cardsInfo">
                <div style="" class="title">车队填报</div>
                <div style="border: 0;" class="form-container">
                    <el-form :inline="true" label-width="80px" :size="'small'" ref="form">
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="司机联系人">
                                    <el-input v-model="state.cardsInfo.driverForm.people" clearable placeholder="请输入"
                                        style="width: 100%" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="司机号码">
                                    <el-input v-model="state.cardsInfo.driverForm.phone" clearable placeholder="请输入"
                                        style="width: 100%" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="车牌号码">
                                    <el-input v-model="state.cardsInfo.driverForm.number" clearable placeholder="请输入"
                                        style="width: 100%" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
                <div style="" class="title">司机填报</div>
                <div style="border: 0;" class="form-container">
                    <el-form style="margin-top: 8px;" :inline="true" label-width="80px" :size="'small'" ref="form">
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="箱号">
                                    <el-input v-model="state.cardsInfo.cardsForm.caseNumber" clearable placeholder="请输入"
                                        style="width: 100%" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="箱封">
                                    <el-input v-model="state.cardsInfo.cardsForm.lockFreightCar" clearable placeholder="请输入"
                                        style="width: 100%" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="进厂时间">
                                    <el-date-picker v-model="state.cardsInfo.cardsForm.EntryTime" type="datetime"
                                        style="width: 100%" placeholder="" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="离厂时间">
                                    <el-date-picker v-model="state.cardsInfo.cardsForm.DepartureTime" type="datetime"
                                        style="width: 100%" placeholder="" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="进港时间">
                                    <el-date-picker v-model="state.cardsInfo.cardsForm.TimeOfArrival" type="datetime"
                                        style="width: 100%" placeholder="" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="附件上传">
                                    <el-upload v-model:file-list="fileList" class="upload-demo"
                                        action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" multiple
                                        :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove"
                                        :limit="3" :on-exceed="handleExceed">
                                        <div style="display: flex;align-items: center;cursor: pointer;">

                                            <el-icon size="16" color="#3B78FF">
                                                <Upload />
                                            </el-icon><span style="color: #3B78FF;">上传附件</span>
                                        </div>
                                    </el-upload>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="cardsInfoReset">重置</el-button>
                    <el-button @click="cardsInfoClose">取消并返回</el-button>
                    <el-button type="primary" @click="cardsInfoSave">
                        确认填写
                    </el-button>
                </div>
            </template>
        </el-dialog>
        <!-- 物流跟踪 -->
        <el-dialog class="dialog" v-model="state.logisticsTracking.show" title="物流跟踪" width="600"
            :before-close="logisticsTrackingClose">
            <div class="map"></div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="logisticsTrackingReset">重置</el-button>
                    <el-button type="primary" @click="logisticsTrackingClose">
                        关闭并返回
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, reactive, computed, watch } from "vue";
import AppPageTable, { useTableOption } from "@/components/AppPageTable2";
import request from "@/public/request";
import { MoreFilled } from "@element-plus/icons";
import { fileDownload } from "@/public/publicUtils";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRouter, useRoute } from "vue-router";
import Draggbale from './components/draggbale.vue'
import AppVxeTable from "@/components/AppVxeTable.vue";
import { useStore } from "vuex";

const Store = useStore();

const Router = useRouter();
const route = useRoute();

//替换标题
Store.dispatch("tab/modifyTabTitle", {
    path: route.fullPath,
    title: '集卡派车列表',
});

//派车状态
let sendCardStatus = {
    0: '派车单生成',
    1: '分配车队',
    2: '派车',
    3: '提柜',
    4: '到厂',
    5: '离厂',
    6: '进港',
}
//派车状态
let sendCardStatusList = [
    { value: 0, label: '派车单生成' },
    { value: 1, label: '分配车队' },
    { value: 2, label: '派车' },
    { value: 3, label: '提柜' },
    { value: 4, label: '到厂' },
    { value: 5, label: '离厂' },
    { value: 6, label: '进港' },
]

//箱号/封箱
let client = [
    // { value: 0, label: '上海悠迪汽车配件厂' },
    // { value: 1, label: '台州硕阳机械有限公司' },
    // { value: 2, label: '涂俊梅' },
]
//物流单号
let department = [
    // { value: 0, label: '财务部' },
    // { value: 1, label: '销售部' },
    // { value: 2, label: '人事部' },
]

//车队
let salesman = [
    // { value: 0, label: '涂俊梅' },
    // { value: 1, label: '张三' },
    // { value: 2, label: '李四' },
]

const state = reactive({
    // 查询条件
    query: {
        doccode: "", //业务编号
        entId: "", //结算对象名称
        invoice: "", //发票号
        blNo: "", //提单号
        saleId: "", //业务员
        feeStatus: 0, //核销状态
        balanceNo: "", //对账单号
        checkStatus: 0, //审核状态
        currency: "", //币种
        isIncome: "", //收支类型 0 付款 1 收款
        invoiceStatus: 0, //开票状态 0 未开票 1 已开票
        lock: true, //单票锁定
        outState: false, //退关状态
    },
    //自定义列
    customColumn: [
        { prop: 'dispatchNumber', label: '派车单号', width: '120' },
        { prop: 'numericalLink', label: '提单号', width: '120' },
        { prop: 'shipmentTrackingNumber', label: '发货单号', width: '120' },
        { prop: 'trackingNumber', label: '物流单号', width: '120' },
        { prop: 'tradeState', label: '贸易类型', width: '130' },
        { prop: 'boxState', label: '箱型', width: '120' },
        { prop: 'boxNum', label: '箱号', width: '120' },
        { prop: 'sealNum', label: '封号', width: '120' },
        { prop: 'booking', label: 'BOOKING', width: '120' },
        { prop: 'contractNumber', label: '合约号', width: '120' },
        { prop: 'shipAgency', label: '船代', width: '100' },
        { prop: 'shipsName', label: '船名', width: '100' },
        { prop: 'voyageNum', label: '航次', width: '100' },
        { prop: 'wharf', label: '靠泊码头', width: '100' },
        { prop: 'EntryCode', label: '进港代码', width: '100' },
        { prop: 'sailTime', label: '开航时间', width: '100' },
        { prop: 'cutEntryTime', label: '截港时间', width: '100' },
        { prop: 'cutCustomsPass', label: '截关时间', width: '100' },
        { prop: 'cutOffTime', label: '截单时间', width: '100' },
        { prop: 'sendCardStatus', label: '派车状态', width: '100' },
        { prop: 'motorcade', label: '车队', width: '100' },
        { prop: 'licenseNumber', label: '车牌号码', width: '100' },
        { prop: 'loadingTime', label: '装柜时间', width: '130' },
        { prop: 'LoadingLocation', label: '装柜地点', width: '100' },
        { prop: 'LoadingContact', label: '装柜联系人', width: '120' },
        { prop: 'Packingnumber', label: '装箱联系电话', width: '130' },
        { prop: 'goodsDescription', label: '货物描述', width: '100' },
    ],
    //表格数据
    tableData: {
        data: [
            { dispatchNumber: 'JH2401704', numericalLink: 123, shipmentTrackingNumber: 'SA24050019', trackingNumber: 'JH2401704', tradeState: "出口", boxState: '40GP*1', boxNum: '--', sealNum: '--', booking: '--', contractNumber: '--', shipAgency: '--', shipsName: '--', voyageNum: '--', wharf: '--', EntryCode: '--', sailTime: '--', cutEntryTime: '--', cutCustomsPass: '--', cutOffTime: '--', sendCardStatus: 0, motorcade: '--', licenseNumber: '--', loadingTime: '--', LoadingLocation: '--', LoadingContact: '--', Packingnumber: '--', goodsDescription: '--' },
            { dispatchNumber: 'JH2401704', numericalLink: 123, shipmentTrackingNumber: 'SA24050019', trackingNumber: 'JH2401704', tradeState: "出口", boxState: '40GP*1', boxNum: '--', sealNum: '--', booking: '--', contractNumber: '--', shipAgency: '--', shipsName: '--', voyageNum: '--', wharf: '--', EntryCode: '--', sailTime: '--', cutEntryTime: '--', cutCustomsPass: '--', cutOffTime: '--', sendCardStatus: 1, motorcade: '--', licenseNumber: '--', loadingTime: '--', LoadingLocation: '--', LoadingContact: '--', Packingnumber: '--', goodsDescription: '--' },
            { dispatchNumber: 'JH2401704', numericalLink: 123, shipmentTrackingNumber: 'SA24050019', trackingNumber: 'JH2401704', tradeState: "出口", boxState: '40GP*1', boxNum: '--', sealNum: '--', booking: '--', contractNumber: '123', shipAgency: 'xxx船代公司', shipsName: 'NYK CLARA', voyageNum: '231W', wharf: '码头名称', EntryCode: 'POLAND', sailTime: '2024-05-09', cutEntryTime: '2024-05-09 22:00', cutCustomsPass: '2024-05-09 22:00', cutOffTime: '2024-05-09 22:00', sendCardStatus: 2, motorcade: 'xx车队', licenseNumber: '--', loadingTime: '2012-12-05 至 2012-12-05 早上', LoadingLocation: 'xx装柜地点', LoadingContact: '张三', Packingnumber: 174147474744, goodsDescription: '货物描述货物描述' },
            { dispatchNumber: 'JH2401704', numericalLink: 464, shipmentTrackingNumber: 'SA24050019', trackingNumber: 'JH2401704', tradeState: "出口", boxState: '40GP*1', boxNum: '--', sealNum: '--', booking: '--', contractNumber: '123', shipAgency: 'xxx船代公司', shipsName: 'NYK CLARA', voyageNum: '231W', wharf: '码头名称', EntryCode: 'POLAND', sailTime: '2024-05-09', cutEntryTime: '2024-05-09 22:00', cutCustomsPass: '2024-05-09 22:00', cutOffTime: '2024-05-09 22:00', sendCardStatus: 3, motorcade: 'xx车队', licenseNumber: '粤BLLO88', loadingTime: '2012-12-05 至 2012-12-05 早上', LoadingLocation: 'xx装柜地点', LoadingContact: '张三', Packingnumber: 174147474744, goodsDescription: '货物描述货物描述' },
            { dispatchNumber: 'JH2401704', numericalLink: 464, shipmentTrackingNumber: 'SA24050019', trackingNumber: 'JH2401704', tradeState: "出口", boxState: '40GP*1', boxNum: '111', sealNum: '123', booking: '--', contractNumber: '123', shipAgency: 'xxx船代公司', shipsName: 'NYK CLARA', voyageNum: '231W', wharf: '码头名称', EntryCode: 'POLAND', sailTime: '2024-05-09', cutEntryTime: '2024-05-09 22:00', cutCustomsPass: '2024-05-09 22:00', cutOffTime: '2024-05-09 22:00', sendCardStatus: 4, motorcade: 'xx车队', licenseNumber: '粤BLLO88', loadingTime: '2012-12-05 至 2012-12-05 早上', LoadingLocation: 'xx装柜地点', LoadingContact: '李四', Packingnumber: 174147474744, goodsDescription: '货物描述货物描述' },
            { dispatchNumber: 'JH2401704', numericalLink: 123, shipmentTrackingNumber: 'SA24050019', trackingNumber: 'JH2401704', tradeState: "出口", boxState: '40GP*1', boxNum: '111', sealNum: '123', booking: '--', contractNumber: '123', shipAgency: 'xxx船代公司', shipsName: 'NYK CLARA', voyageNum: '231W', wharf: '码头名称', EntryCode: 'POLAND', sailTime: '2024-05-09', cutEntryTime: '2024-05-09 22:00', cutCustomsPass: '2024-05-09 22:00', cutOffTime: '2024-05-09 22:00', sendCardStatus: 5, motorcade: 'xx车队', licenseNumber: '粤BLLO88', loadingTime: '2012-12-05 至 2012-12-05 早上', LoadingLocation: 'xx装柜地点', LoadingContact: '王五', Packingnumber: 174147474744, goodsDescription: '货物描述货物描述' },
            { dispatchNumber: 'JH2401704', numericalLink: 464, shipmentTrackingNumber: 'SA24050019', trackingNumber: 'JH2401704', tradeState: "出口", boxState: '40GP*1', boxNum: '111', sealNum: '123', booking: '--', contractNumber: '123', shipAgency: 'xxx船代公司', shipsName: 'NYK CLARA', voyageNum: '231W', wharf: '码头名称', EntryCode: 'POLAND', sailTime: '2024-05-09', cutEntryTime: '2024-05-09 22:00', cutCustomsPass: '2024-05-09 22:00', cutOffTime: '2024-05-09 22:00', sendCardStatus: 6, motorcade: 'xx车队', licenseNumber: '粤BLLO88', loadingTime: '2012-12-05 至 2012-12-05 早上', LoadingLocation: 'xx装柜地点', LoadingContact: '王五', Packingnumber: 174147474744, goodsDescription: '货物描述货物描述' },
        ],
        option: useTableOption(),
    },
    //自定义列数据
    custom: {
        show: false,
        data: []
    },
    //创建派车单数据
    truckingOrder: {
        show: false,
        data: [
            { ConsignNum: 'JH2401878', Boxbox: '20GP*1', haulingState: '整箱' },
            { ConsignNum: 'JH2401878', Boxbox: '20GP*1', haulingState: '整箱' },
            { ConsignNum: 'JH2401878', Boxbox: '20GP*1', haulingState: '拼箱' },
            { ConsignNum: 'JH2401878', Boxbox: '20GP*1', haulingState: '整箱' },
        ],
        pick: {},
        loading: false

    },
    //指派车队数据
    designateCards: {
        show: false,
        form: {
            blNo: '123',
            booking: '--',
            contractNumber: '123',
            shipAgency: "xx船公司",
            shipsName: 'NYK CLARA',
            voyage: '231W',
            wharf: 1,
            entryCode: 1,
            sailingDate: '2024-05-09',
            estimateTimeClose: "2024-05-09 10:20",
            closingDate: '2024-05-09 10:20',
            closingTime: '2024-05-09 10:20',
            boxBox: '40GP',
            goodsMark: '货物描述货物描述货物描述....'
        },
        //装柜信息数据
        data: [
            // {
            //     id: 1,
            //     stuffingTime: '',
            //     upDown: "",
            //     stuffingAddress: '',
            //     stuffingPeo: '',
            //     stuffingPho: '',
            // }
        ],
        //指派车队form
        cardsForm: {
            cards: '',
            people: '',
            number: ''
        },
    },
    //车队信息填报数据
    cardsInfo: {
        show: false,
        driverForm: {
            people: '',
            phone: '',
            number: ''
        },
        cardsForm: {
            caseNumber: '',
            lockFreightCar: '',
            EntryTime: '',
            DepartureTime: '',
            TimeOfArrival: '',
        },
    },
    logisticsTracking: {
        show: false
    }
})

//获取列表
function getList() {

}

//重置
function reset() {
    state.query = {
        doccode: "", //业务编号
        entId: "", //结算对象名称
        invoice: "", //发票号
        blNo: "", //提单号
        saleId: "", //业务员
        feeStatus: 0, //核销状态
        balanceNo: "", //对账单号
        checkStatus: 0, //审核状态
        currency: "", //币种
        isIncome: "", //收支类型 0 付款 1 收款
        invoiceStatus: 0, //开票状态 0 未开票 1 已开票
        lock: true, //单票锁定
        outState: false, //退关状态
    }
}


//自定义列dialog打开
function customOpen() {
    state.custom.show = true
}

//自定义列dialog关闭
function customHandleClose() {
    state.custom.show = false
}

//重置自定义列
function resetDraggbale() {
    ElMessage.success('重置成功')
    customHandleClose()
}

//保存自定义列
function saveDraggbale() {
    ElMessage.success('保存成功')
}

//刷新
function refresh() {
    ElMessage.success('刷新成功')
}

//创建派车单弹窗打开
function truckingOrderShow() {
    state.truckingOrder.show = true
}

//创建派车单弹窗关闭
function truckingOrderClose() {
    state.truckingOrder.show = false
}

//创建派车单单选
const taskTableRef = ref();
function truckingOrderChange(selection, row) {
    if (selection.length > 1) {
        let del_row = selection.shift();
        taskTableRef.value.toggleRowSelection(del_row, false); // 用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）；第二个参数为true时又变成了多选
    }
    state.truckingOrder.pick = selection
}

//创建派车单弹窗保存
function truckingOrderSave() {
    if (JSON.stringify(state.truckingOrder.pick) == '{}') {
        ElMessageBox.confirm(
            '您的内容还未填写完毕，提交不成功',
            '温馨提示',
            {
                confirmButtonText: '继续填写',
                cancelButtonText: '取消',
            }
        ).then(() => {

        }).catch(() => {

        })
        return
    }
    ElMessage.success('保存成功')
    truckingOrderClose()
}

//指派车队弹窗打开
function designateCardsShow() {
    if (state.tableData.option.selected.length === 0) {
        ElMessage.warning('请选择数据')
        return
    }
    state.designateCards.show = true
}

//指派车队弹窗关闭
function designateCardsClose() {
    state.designateCards.show = false
}
//指派车队弹窗重置
function designateCardsReset() {
    ElMessage.success('重置成功')
}

//指派车队弹窗保存
function designateCardsSave() {
    if (state.designateCards.data.length === 0) {
        console.log('1111')
        ElMessageBox.confirm(
            '您的内容还未填写完毕，提交不成功',
            '温馨提示',
            {
                confirmButtonText: '继续填写',
                cancelButtonText: '取消',
            }
        ).then(() => {

        }).catch(() => {

        })
        return
    } else {
        console.log('222')
        for (const item of state.designateCards.data) {
            if (Object.values(item).some(item1 => !item1)) {
                ElMessageBox.confirm(
                    '您的内容还未填写完毕，提交不成功',
                    '温馨提示',
                    {
                        confirmButtonText: '继续填写',
                        cancelButtonText: '取消',
                    }
                ).then(() => {

                }).catch();
                return
            }
        }
    }
    //如果state.designateCards.cardsForm里面有任意数据没有填写就return
    if (Object.values(state.designateCards.cardsForm).some(item => !item)) {
        console.log('333')
        ElMessageBox.confirm(
            '您的内容还未填写完毕，提交不成功',
            '温馨提示',
            {
                confirmButtonText: '继续填写',
                cancelButtonText: '取消',
            }
        ).then(() => {

        }).catch()
        return
    }
    ElMessage.success('保存成功')
    designateCardsClose()
}

//添加装柜地点
function addStuffing() {
    state.designateCards.data.push({
        id: state.designateCards.data.length + 1,
        stuffingTime: '',
        stuffingAddress: '',
        stuffingPeo: '',
        stuffingPho: '',
    })
}

//删除装柜地点
function delStuffing(id) {
    state.designateCards.data = state.designateCards.data.filter(item => item.id !== id)
}

//车队信息弹窗打开
function cardsInfoShow() {
    if (state.tableData.option.selected.length === 0) {
        ElMessage.warning('请选择数据')
        return
    }
    state.cardsInfo.show = true
}

//车队信息弹窗关闭
function cardsInfoClose() {
    state.cardsInfo.show = false
}

//车队信息重置
function cardsInfoReset() {
    ElMessage.success('重置成功')
}

//车队信息弹窗保存
function cardsInfoSave() {
    if (Object.values(state.cardsInfo.driverForm).some(item => !item)) {
        console.log('333')
        ElMessageBox.confirm(
            '您的内容还未填写完毕，提交不成功',
            '温馨提示',
            {
                confirmButtonText: '继续填写',
                cancelButtonText: '取消',
            }
        ).then(() => {

        }).catch()
        return
    }
    if (Object.values(state.cardsInfo.cardsForm).some(item => !item)) {
        console.log('333')
        ElMessageBox.confirm(
            '您的内容还未填写完毕，提交不成功',
            '温馨提示',
            {
                confirmButtonText: '继续填写',
                cancelButtonText: '取消',
            }
        ).then(() => {

        }).catch()
        return
    }
    ElMessage.success('保存成功')
    cardsInfoClose()
}

//物流弹窗打开
function logisticsTrackingShow() {
    if (state.tableData.option.selected.length === 0) {
        ElMessage.warning('请选择数据')
        return
    }
    state.logisticsTracking.show = true
}

//物流车队弹窗关闭
function logisticsTrackingClose() {
    state.logisticsTracking.show = false
}

//物流车队弹窗重置
function logisticsTrackingReset() {
    ElMessage.success('重置成功')
}

// 跳转详情页面
const toEditPage = async (sendCardStatus, id) => {
    console.log(sendCardStatus)
    Router.openTab({
        path: "/dispatching/collectCardsDetail",
        query: {
            status: sendCardStatus,
            title: `集卡派车详情${id}`
        },
    });
};

</script>

<style lang="scss" scoped>
.form-container {
    border: 1px solid #e8e8e8;
    padding: 6px 6px 6px 8px;
    background-color: #ffffff;

    :deep(.el-form-item--small .el-form-item__label) {
        font-size: 12px;
        color: rgba(0, 0, 0, 0.85);
    }

    :deep(.el-input--suffix .el-input__inner) {
        padding-right: 4px;
    }

    :deep(.el-form--inline .el-form-item) {
        display: flex;
        margin-right: 0;
    }

    :deep(.el-form-item--small.el-form-item) {
        margin-bottom: 8px;
    }
}

:deep(.el-checkbox.el-checkbox--large) {
    height: 0px;
}

:deep(.el-dialog__footer) {
    padding-bottom: 10px;
    text-align: center;
}

:deep(.el-table__cell) {
    height: auto;
}

:deep(.el-dropdown) {
    margin-right: 10px;
}

:deep(.el-message-box) {
    width: 240px !important;
}


.tableDiv {
    box-sizing: border-box;
    width: 100%;
    padding: 8px 12px;
    margin-top: 8px;
    background-color: #ffffff;

    .btns {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 28px;
        // background-color: aqua;
        margin-bottom: 10px;
    }
}

.ctn {
    display: flex;
    justify-content: space-between;

    .left {
        width: 110px;
        font-size: 12px;

        span {
            color: #F5222D;
            margin-right: 2px;
        }
    }

    .right {
        width: calc(100% - 110px);
    }
}

.designateCards {
    .title {
        width: 100%;
        background: #F5F8F7;
        font-size: 12px;
        padding: 4px 8px;
    }

    .stuffingInfo {
        margin-top: 8px;

        .item {
            .itemTitle {
                display: flex;
                justify-content: space-between;
                align-items: center;
                width: 100%;
                border-radius: 2px;
                background: #E6F7FF;
                border: 1px solid #91D5FF;
                font-size: 12px;
                padding: 4px 16px;

                .ri {
                    font-size: 12px;
                    color: #3B78FFD8;
                    cursor: pointer;
                }
            }

            .itemContent {}
        }

        .add {
            color: #3B78FF;
            font-family: PingFang HK;
            font-weight: regular;
            font-size: 12px;
            line-height: 20px;
            letter-spacing: 0px;
            text-align: left;
            cursor: pointer;

        }
    }
}

.cardsInfo {
    .title {
        width: 100%;
        background: #F5F8F7;
        font-size: 12px;
        padding: 4px 8px;
    }
}

.map {
    width: 100%;
    height: 250px;
    background: url(@/assets/map.png) no-repeat center center;
}

:deep(.el-table th.el-table__cell:nth-child(1) .cell) {
    visibility: hidden;
}
</style>